<template>
	<view class="">
		<view class="is-bg-blue has-pdt-30">
			<view class="do-top has-pdlr-20 s-row-flex">
				<view class="is-col-8 is-left" @tap="timeUp">
					<uni-icons type="arrowleft" color="#FFFFFF" size="28"></uni-icons>
				</view>
				<view class="is-col-8 is-size-18 is-center">买币</view>
				<view class="is-col-8 is-right"></view>
			</view>
			<view class="do-top has-pdlr-20">
				<view class="is-size-20 is-bold has-floatr ">
					<image class="is-img-inline clockbox" src="../../static/imgs/clock.png" mode=""></image>
					<uni-countdown :show-day="false" :hour="0" :minute="minute" borderColor="#007AFF" splitorColor="#FFFFFF" backgroundColor="#007AFF" :second="0" :reset="reset" @timeup="timeUp"></uni-countdown>
				</view>
				<view class="is-size-30">
					请及时付款
				</view>
				<view class="is-size-18">
					下单后请尽快完成付款
				</view>
			</view>
		</view>
		<view class="orderbox">
			<view class="is-blod has-pdb-8">
				订单信息
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					订单号
				</view>
				<view class="is-col-16 is-right">
					{{money_no}}
				</view>
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					买币数量
				</view>
				<view class="is-col-16 is-right">
					{{money_num_true}}DC
				</view>
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					手续费
				</view>
				<view class="is-col-16 is-right">
					-{{money_num_rebate}}DC
				</view>
			</view>
		</view>
		<view class="bankbox">
			<view class="is-blod has-pdb-8">
				付款信息
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					所属银行
				</view>
				<view class="is-col-16 is-right">
					{{bank_com}}
				</view>
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					银行卡号
				</view>
				<view class="is-col-16 is-right">
					{{bank_card}}
				</view>
			</view>
			<view class="s-row has-pdtb-4">
				<view class="is-col-8 is-grey">
					姓名
				</view>
				<view class="is-col-16 is-right">
					{{bank_name}}
				</view>
			</view>
		</view>
		<view class="bankbox">
			<view class="s-row has-pdtb-12">
				<view class="is-col-8 is-blod">
					需支付
				</view>
				<view class="is-col-16 is-size-25 is-right is-blue-color">
					￥{{money_num_true}}
				</view>
			</view>
			<view class="is-size-14 is-right is-red-color">
				请严格按照订单金额支付！
			</view>
		</view>
		<view class="has-pd-20" v-show="buy_show == 0">
			 <button type="warn" @click="buyok" class="z-yello">我已付款</button>
		</view>
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>

<script>
	var _self;
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue";
	export default {
		components: {
			uniCountdown,
			uniIcons
		},
		data() {
			return {
				foxtoken:'',
				minute: 0,
				reset: false,
				id:0,
				money_no:'',
				money_num_true:'',
				money_num_rebate:'',
				bank_com:'',
				bank_card:'',
				bank_name:'',
				buy_show:0
			}
		},
		onLoad(options) {
			_self = this;
			this.reset = !this.reset;
			this.minute = 10000000;
			this.id = options.id;
			let info = this.service.getfox();
			if(info[0]){
				this.foxtoken = info[0]['foxtoken'];
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_buyinfo',
					method:'POST',
					data: {
						id:this.id,
						user_key:this.foxtoken
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success: res => {    
						var foxmsg = res.data;
						// console.log(foxmsg)
						if (foxmsg.code == 200) {                    
							_self.money_no = foxmsg.data.money_no;
							_self.money_num_true = foxmsg.data.money_num_true;
							_self.money_num_rebate = foxmsg.data.money_rebate;
							_self.buy_show =foxmsg.data.money_hand;
							_self.bank_com = foxmsg.data.bank['bank_com']+foxmsg.data.bank['bank_company'];
							_self.bank_card = foxmsg.data.bank['bank_card'];
							_self.bank_name = foxmsg.data.bank['bank_name'];
						}
					}                    
				});
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
		},
		methods:{
			timeUp(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			buyok(){
				this.$showModal({
				    title: '警告',
				    content: '如未付款点击已付款，直接封锁账号',
					confirmText:'我已付款',
				    success: function (res) {
				        if (res.confirm) {
				            uni.request({
				            	url: _self.service.FOX_URL + 'diamond/get_buyinfo_do',
				            	method:'POST',
				            	data: {
				            		id:_self.id,
									user_key:_self.foxtoken
				            	},
				            	dataType:'json',
				            	header:{
				            		'content-type':'application/x-www-form-urlencoded'
				            	},
				            	success: res => {    
				            		var foxmsg = res.data;
									// console.log(foxmsg)
				            		uni.showToast({
				            			title:foxmsg.msg,
				            			icon:'none',
				            			mask:true
				            		})
				            		setTimeout(function() {
				            		    uni.redirectTo({
				            		    	url:'./account'
				            		    })
				            		}, 1500)
				            	}                    
				            });
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.do-top{
		background-color: #007AFF;
		color:#fff;
		padding:20rpx 0;
	}
	.clockbox {margin:8upx;background:#F0AD4E;width:52upx;height: 52upx;border-radius: 100%;}
	.orderbox{
		padding:20upx;
		border-bottom: 16upx solid #F0F0F0;
	}
	.bankbox{
		padding:20upx;
		border-bottom: 6upx solid #F0F0F0;
	}
</style>
